<script setup>
    import { ref, reactive, onMounted, provide } from 'vue'
    import { useGetListApi, useDeleteApi ,useDeletesApi} from './${t.varName}-api.js'
    import ${t.modelName}AddOrUpdate from '@/views/${t.varName}/${t.varName}-add-or-update.vue'
    import ${t.modelName}Info from '@/views/${t.varName}/${t.varName}-info.vue'
    // 生命周期
    onMounted(() => {
        getList()
    })
    // 提供给子组件
    provide("getList", getList)

    // 查询参数
    const p = reactive({
       <#list t.getTallList() as c>
           ${c.fieldName}:'',
       </#list>
            page: 1,
            size: 10,
            orderBy: ''
    })

    // 列表数据
    const tableData = reactive({
        dataList: [],
        dataCount: 0,
        //多选
        multipleSelection : []
    })

    //选中行为
    const handleSelectionChange = (selects) => {
        tableData.multipleSelection = selects
    }

    //子组件句柄
    const addOrUpdate = ref(null)
    const info = ref(null)

    //打开子组件弹框
    function openAddOrUpdateDialog(id) {
        addOrUpdate.value.open(id)
    }
    //打开子组件弹框
    function openInfoDialog(id) {
        info.value.open(id)
    }
    function getList() {
        useGetListApi(p).then(res => {
            tableData.dataList = res.data
            tableData.dataCount = res.dataCount
        })
    }

    function del(row) {
        //删除确认
        ElMessageBox.confirm(
                '永久删除该文件. 继续?',
                'Warning',
                {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning',
                }
        ).then(() => {
            //删除
            useDeleteApi({ id: row.id }).then(res => {
                getList()//刷新
            })
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
    }

    function dels() {
        //删除确认
        ElMessageBox.confirm(
                '永久删除该文件. 继续?',
                'Warning',
                {
                    confirmButtonText: 'OK',
                    cancelButtonText: 'Cancel',
                    type: 'warning',
                }
        ).then(() => {
            //删除
            useDeletesApi({ ids: tableData.multipleSelection.map(x => x.id).join(",") }).then(res => {
                getList()//刷新
            })
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
    }

</script>

<template>
    <div class="vue-box">
        <el-col :span="24">
            <div class="c-panel">
                <div class="c-title">用户列表</div>
                <!-- 表单 -->
                <el-form :inline="true">
                    <#list t.getTallList() as c>
                    <el-form-item label="${c.columnComment3}">
                        <el-input v-model="p.${c.fieldName}" placeholder="精确查询"/>
                    </el-form-item>
                    </#list>
                    <el-form-item style="min-width: 0px;">
                        <el-button type="primary" icon="search" @click="p.page = 1; getList()">查询</el-button>
                    </el-form-item>
                    <br />
                    <el-form-item label="综合排序：">
                        <el-radio-group v-model="p.orderBy" @change="getList">
                            <#list t.getTallList() as c>
                                <el-radio label="${c.fieldName}:asc" >${c.columnComment3}</el-radio>
                            </#list>
                        </el-radio-group>
                    </el-form-item>
                </el-form>

                <!-- CRUD按钮 -->
                <div class="fast-btn">
                    <el-button class="c-btn" icon="plus" type="primary" @click="openAddOrUpdateDialog(0)">新增</el-button>
                    <el-button class="c-btn" icon='view' type="success"> 查看</el-button>
                    <el-button class="c-btn" icon='delete' type="danger" @click="dels">删除</el-button>
                    <el-button class="c-btn" icon='download' type="warning">导出</el-button>
                    <el-button class="c-btn" icon='refresh' type="info"> 重置</el-button>
                </div>

                <!-- 表格 -->
                <div class="table-box">
                    <el-table :data="tableData.dataList" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <#list t.tallList as c>
                        <el-table-column prop="${c.fieldName}" label="${c.columnComment3}" />
                        </#list>
                        <el-table-column prop="address" width="300px" label="操作">
                            <template #default="scoped">
                                <el-button class="c-btn" type="success" icon="view" @click="openInfoDialog(scoped.row.id)" size="small">详情</el-button>
                                <el-button class="c-btn" type="primary" icon="edit" @click="openAddOrUpdateDialog(scoped.row.id)" size="small">编辑</el-button>
                                <el-button class="c-btn" type="danger" icon="delete" @click="del(scoped.row)" size="small">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <!-- 分页 -->
                <div class="page-box">
                    <el-pagination background v-model:currentPage="p.page" v-model:page-size="p.size"
                                   :page-sizes="[1, 10, 20, 30, 40, 50, 100]" layout="total, prev, pager, next, sizes, jumper"
                                   :total="tableData.dataCount" @size-change="getList()" @current-change="getList()">
                    </el-pagination>
                </div>

                <!-- 新增/修改弹框 -->
                <${t.modelName}AddOrUpdate ref="addOrUpdate" />
                <!-- 详情弹框 -->
                <${t.modelName}Info ref="info"/>
            </div>
        </el-col>
    </div>
</template>

<style scoped>
</style>
